<template>
  <div class="tw-main">
    <div class="screen">
      <el-row class="tw-grid">
        <el-col :span="12" :lg="12" class="tw-grid__left">
          <tw-card
          :heightCard="'440px'"
          :label="'各类图书藏书情况'"
          >
            <tw-chart
              :chartOption="baroption1.chartOption"
              :dataset="baroption1.dataset"
              :chartDataMaps="baroption1.chartDataMaps"
              height="368px">
            </tw-chart>
          </tw-card>
        </el-col>
        <el-col :span="12" :lg="12" class="tw-grid__right">
          <tw-card
          :heightCard="'440px'"
          :label="'各类图书借阅情况'"
          >
           <tw-chart
            :chartOption="baroption2.chartOption"
            :dataset="baroption2.dataset"
            :chartDataMaps="baroption2.chartDataMaps"
            height='368px'
          >
          </tw-chart>
          </tw-card>
        </el-col>
      </el-row>
      <el-row class="tw-grid">
        <el-col :span="24" :lg="24" class="tw-grid__left">
          <tw-card
            widthCard='1880px'
            :heightCard="'465px'"
            :label="'各类图书藏借情况'">
              <tw-table
                class="medium-height"
                :tableData="tableData"
                :maxItem="8"></tw-table>
          </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import echarts from 'echarts'
import TwCard from '@/components/TwCard.vue'
import TwChart from '@/components/TwChart.vue'
import TwTable from '@/components/TwTable.vue'
export default{
  created () {
    this.baroption1 = JSON.parse(JSON.stringify(this.pie))
    this.baroption2 = JSON.parse(JSON.stringify(this.line))
    this.baroption3 = JSON.parse(JSON.stringify(this.line))

  },
  props: [],
  data () {
    return {
      sumList: [], // 增加数组
      reduceList: [], // 减少数组
      lgwidth: 8,
      lgclass: 'tw-grid__middle',
      isXQshow: false, // 当前选择了学前阶段 则为true 反之false
      isSQshow: true, // 当前选择了学前或者中职阶段 则为true 反之false
      isZZshow: true, // 当前选择了中职阶段 则为true 反之false
      additionalOptions: {
        echarts_indexTeacherStudentRatio: {}
      },
      titleNumFlag: 0, // 头部初始化默认数据
      hero: [],
      pie: {
        chartOption: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            show: true,
            top: 0,
            textStyle: {
              fontSize: 16
            }
          },
          series: [
            {
              name: '',
              type: 'pie',
              roseType: 'area',
              avoidLabelOverlap: false,
              legend: {
                show: true,
                top: 0,
                textStyle: {
                  fontSize: 16
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  textStyle: {
                    fontSize: 16
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: []
            }
          ]
        },
        dataset: [],
        chartDataMaps: []
      },
      baroption1: {},
      baroption2: {},
      baroption3: {},
      line: {
        chartOption: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            show: false,
            top: 0,
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            top: '25%',
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              fontSize: 16,
              interval: 0
            },
            data: []
          },
          yAxis: {
            type: 'log',
            axisLabel: {
              fontSize: 19
            }
          },
          series: []
        },
        chartDataMaps: [],
        dataset: []
      },
      tableData:{
        thead: [
          {
            value: '类名',
            width: '40%'
          },
          {
            value: '藏书数',
            width: '25%'
          },
          {
            value: '借阅数',
            width: '20%'
          },
          {
            value: '借阅率',
            width: '15%'
          }
        ],
        tbody: [
          {
            item1: '马克思主义、列宁主义、毛泽东思想',
            item2: '14325',
            item3: '5135',
            item4: '36%'
          },
          {
            item1: '哲学',
            item2: '196879',
            item3: '97689',
            item4: '50%'
          },
          {
            item1: '社会科学',
            item2: '2385773',
            item3: '982715',
            item4: '41%'
          },
          {
            item1: '自然科学',
            item2: '116872',
            item3: '26872',
            item4: '23%'
          },
          {
            item1: '综合性图书',
            item2: '38995',
            item3: '17593',
            item4: '45%'
          }
        ]
      },
    }
  },
  components: {
    TwCard,
    TwChart,
    TwTable
  },
  mounted () {
    // 异动情况
    let vm = this
    this.$nextTick(() => {


      // 各类图书藏书情况
      vm.baroption1Init()
      //各类图书借阅情况
      vm.baroption2Init()
    })
  },
  methods: {
    // 各类图书藏书情况
    baroption1Init (jyjdRoute = '总计') {
      let dataset = [{
          name: '马克思主义、列宁主义、毛泽东思想',
          value: 14325
        },{
          name: '哲学',
          value: 196879
        },{
          name: '社会科学',
          value: 2385773
        },{
          name: '自然科学',
          value: 116872
        },{
          name: '综合性图书',
          value: 38995
        },]
      let chartDataMaps = [{
        dataKey: 'value',
        name: '各类图书藏书情况'
      }]
      this.baroption1.dataset = dataset
      console.log(chartDataMaps)
      this.baroption1.chartDataMaps = chartDataMaps.map((item, index) => {
        return {
          ...item,
          type: 'pie',
          radius: [0, 110],
          center: ['50%', '50%'],
          avoidLabelOverlap: true,
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 16
              },
              formatter: '{b}\n{d}%',
              alignTo: 'none'
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          }
        }
      })
    },

    // 各类图书借阅情况
    baroption2Init (jyjdRoute = '总计') {
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xsxx_cxfbsqzntj?tjly=城乡分布&jyjd=` + jyjdRoute).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          // let toolTip = this.baroption2.chartOption.tooltip
          // toolTip.formatter = function (datas) {
          //   var res = datas[0].name + '<br/>'
          //   for (var i = 0, length = datas.length; i < length; i++) {
          //     res += datas[i].seriesName + '：' +
          //      datas[i].data.value + '人' + '<br/>'
          //   }
          //   return res
          // }
          let dataset = [{
              name: '马克思主义、列宁主义、毛泽东思想',
              value: 5135
            },{
              name: '哲学',
              value: 97689
            },{
              name: '社会科学',
              value: 982715
            },{
              name: '自然科学',
              value: 26872
            },{
              name: '综合性图书',
              value: 17593
            },]
          let chartDataMaps = [
            {
              'name': '借阅',
              'dataKey': 'value'
            }]
          this.baroption2.dataset = dataset
          this.baroption2.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              // stack: 'bar',
              barMaxWidth: 18 // 控制柱条的宽度
            }
          })
        }
      }).catch(res => {
        console.log(res)
      })
    },

  }
}
</script>

<style lang="scss">
.teach-message-title{
  margin-bottom: 20px;
  height: auto;
  text-align: center;
  li{
    background-color: rgba(0,93,255,0.31);
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    display: inline-block;
    min-width: 180px;
    min-height: 80px;
    line-height: 40px;
    margin-right: 20px;
    .xlabel {
      font-size: 20px;
    }
  }
}
.teach-message-active{
  border: 2px solid #015cff;
  box-shadow: inset 0px 1px 15px 4px #015cff;
}
.teach-message-number{
  font-size: 30px;
  color:#06ffff;
  vertical-align: baseline;
  font-family: 'customer';
}
</style>
